<template>
    <div class="menubox">
        <el-menu
         v-if="menuHeaderType==='single'"
        default-active="2"
         router
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <div  v-for="item in menuNavData" :key="item.id">
            <el-sub-menu  v-if="item.children.length>0" :index="item.id">
              <template #title> {{ item.name }} </template>
              <el-menu-item
              v-for="item2 in item.children" :route="item2.path" :key="item2.name" :index="item2.name">
              <template #title>{{item2.name}}</template>
            </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-if="item.children.length===0" :index="item.path">
              {{ item.name }} 
            </el-menu-item>
          </div>
      </el-menu>
      <el-menu
            v-if="menuHeaderType==='double'"
            :default-active="leftActiveIndex"
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
        <el-menu-item :index="item.path" v-for="item in menuNavData" :key="item.key">{{item.name}}</el-menu-item>
      </el-menu>
    </div>
</template>
<script>
import { watch,ref,reactive, toRefs,onMounted,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { onBeforeRouteUpdate } from "vue-router";
export default {
    name:'navleft',
    setup(){
        const $store = useStore()
       
        const { proxy } = getCurrentInstance();// proxy  等于 this
        const leftActiveIndex = ref('1')
        watch(() => $store.state.headerActive, (val, old) => {
          console.log(val.id)
            initMenu(val.id)
        })
        const state  =  reactive({
            menuNavData:[],// 菜单渲染
            menuHeaderType:$store.state.menuType// 菜单类型，单菜单 / 双菜单
        })
        const handleOpen = ()=>{

        }
        const handleClose = () =>{

        }
        onBeforeRouteUpdate(to => {
        });
        onMounted(()=>{
            if (state.menuHeaderType === 'double') {
              initMenu($store.getters.getHeaderActive.id)
            }else{
              console.log(5655555)
              initMenu()
            }
           initActive()
        })
        const initActive = async()=>{
            let pathData =  await proxy.$router.currentRoute.value.path
            if (pathData==='/home') {
                leftActiveIndex.value =''
            } else {
                leftActiveIndex.value =pathData
            }
        }
        const initMenu = (id)=>{
          console.log(id)
            let menuArr = $store.getters.getMenu
            let arr = []
            if(id){
              for(var i =0;i<menuArr.length;i++){
                  if(menuArr[i].parentId&&id==menuArr[i].parentId){
                      arr.push(menuArr[i])
                  }
              }
            } else {
              arr = menuArr
            }
           
            console.log(arr)
            state.menuNavData =arr
        }
        return{
            handleOpen,
            handleClose,
            initMenu,
            ...toRefs(state),
            leftActiveIndex
        }
    }
}
</script>
<style lang="scss" scoped>
.menubox{
    height: 100%;
    border-right:1px solid #e6e6e6;
}
:deep(.el-menu){
    border:none;
}
</style>